import React from 'react';
import {RecordComponent} from "../components/record/RecordComponent";
import {HeaderComponent} from "../components/header/HeaderComponent";
import {SlideComponent} from "../components/slide/SlideComponent";
import {CategoryComponent} from "../components/category/CategoryComponent";

import { LoadMore } from 'react-weui';
import 'weui';
import 'react-weui/build/packages/react-weui.css';
import './index.scss';
import {getRecordsAction} from "../actions/recordAction";

export class IndexView extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            searchCategoryId:'',
            records : [],
            page:1,
            pages:1,
            per_page:6,
            status:2,//，2加载更多中，3没有更多了
        }
    }

    componentDidMount(){

        const that = this;

        this.getRecords(this.state.page);

    }

    loadMore(){

        this.getRecords(++this.state.page);

    }

    getRecords(page){
        const that = this;
        let params = {page,per_page:this.state.per_page};
        if(this.state.searchCategoryId) params.categoryId = this.state.searchCategoryId;
        console.log(2);
        getRecordsAction(params).then(function (res) {
            const nowItems = page === 1 ? res.items : that.state.records.concat(res.items);
            that.setState({records:nowItems});
            that.setState({page:res.meta.page,pages:res.meta.pages});
            if(res.meta.page === res.meta.pages){
                //最后一页了
                that.setState({status:3});
            }
        })
    }

    switchCategory(id){

        console.log(id);

        const that = this;

        this.setState({searchCategoryId:id},function () {

            that.setState({page:1});

            that.getRecords(that.state.page);

        });

    }

    render(){

        const that = this;

        return <div className="index">
            <HeaderComponent history={this.props.history} />
            <SlideComponent/>
            <CategoryComponent selectedCategoryId = {this.state.searchCategoryId}  switchCategory = {that.switchCategory.bind(this)} />
            {
                this.state.records.map(function (value,index) {
                    return <RecordComponent history={this.props.history} showNewTrigger={index===0} key={value.id} {...value}/>
                },this)
            }
            {
                this.state.records.length === 0 ?
                    <div className="more">
                        <LoadMore showLine>实在太懒了，该栏目没添加数据</LoadMore>
                    </div> : null
            }
            {
                this.state.records.length > 0 && this.state.status === 2 ?
                    <div className="more"  onClick={this.loadMore.bind(this)}>
                        <LoadMore showLine>点击加载更多</LoadMore>
                    </div> : null
            }
            {
                this.state.records.length > 0 && this.state.page === this.state.pages && this.state.status === 3?
                    <div className="more">
                        <LoadMore showLine>飞哥是有底线的</LoadMore>
                    </div> : null
            }
        </div>

    }

}